.feature--broadcast {
  
  .feature__image {
    display: flex;
    justify-content: center;
    align-items: center;
    
    @include breakpoint($max: 800px) {
      height: 300px;
    }
  }
  
  .broadcast__image__background {
    position: relative;
    z-index: 1;
  }
  
  &.is-active {
    .broadcast__animation {
      border-color: #48b7ab;
    }
  }
}

@keyframes broadcast-ani--1 {
  0%   { opacity: 1; width: 80px; height: 80px}
  50% { opacity: 0; width: 300px; height: 300px  }
  100% { opacity: 0; }
}

.broadcast__animation {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  border: 2px solid transparent;
  animation: broadcast-ani--1 2s infinite;
}
